
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="renderer" content="webkit">
    <title>微信支付收银台</title>


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        body{background:#f2f2f4;}
        body,html{width:100%;height:100%;}
        *,:after,:before{box-sizing:border-box;}
        *{margin:0;padding:0;}
        img{max-width:100%;}
        #header{height:60px;border-bottom:2px solid #eee;background-color:#fff;text-align:center;line-height:60px;}
        #header h1{font-size:20px;}
        #main{overflow:hidden;margin:0 auto;padding:20px;padding-top:80px;width:992px;max-width:100%;}
        #main .left{float:left;width:40%;box-shadow:0 0 60px #b5f1ff;}
        .left p{margin:10px auto;}
        .make{padding-top:15px;border-radius:10px;background-color:#fff;box-shadow:0 3px 3px 0 rgba(0,0,0,.05);color:#666;text-align:center;transition:all .2s linear;}
        .make .qrcode{margin:auto;}
        .make .money{margin-bottom:0;color:#f44336;font-weight:600;font-size:18px;}
        .info{padding:15px;width:100%;border-radius:0 0 10px 10px;background:#32343d;color:#f2f2f2;text-align:center;font-size:14px;}
        #main .right{float:right;padding-top:25px;width:60%;color:#ccc;text-align:center;}
        @media (max-width:768px){
            #main{padding-top:30px;}
            #main .left{width:100%;}
            #main .right{display:none;}
        }
    </style>





    <link rel="stylesheet" type="text/css" th:href="@{/css/s.css}">

    <link th:href="@{/css/wechat_pay.css?v=2}" rel="stylesheet" media="screen">
</head>
<body>






<div id="main">
    <div class="left">
        <div class="make">
            <p><img th:src="@{/img/wxpay-logo.png}" alt="" style="height:30px;"></p>

            <p style="font-weight:bold; color:green">[[${orderCode}]]</p>
            <p class="money" id="price" style="font-weight:bold; color:green">￥[[${amount}]]</p>

            <center>
                <img th:src="${skdImage}" width="230" height="230">
            </center>
            <center>
                <a id="alipayh5url_1"></a>
                <a id="alipayh5url_2"></a>
            </center>
            <div class="info">
                <p><font color="#FF0000" size="+1">1、截图保存当前二维码至手机相册</font></p>
                <p><font color="#FF0000" size="+1">2、打开微信右上角扫一扫</font></p>
                <p><font color="#FF0000" size="+1">3、点相册，选择刚刚截图的二维码</font></p>
                <p><font color="#FF0000" size="+1">4、请在规定时间内付款，超时支付无法上分</font></p>
            </div>
        </div>
    </div>
    <div class="right">
        <img th:src="@{/img/wxpay-sys.png}" alt="">


    </div>
</div>

</br>
</dl>
<a href="javascript:void(0)" class="arrow"><i class="ico-arrow"></i></a>
</div>
<div class="tip">
    <span class="dec dec-left"></span>
    <span class="dec dec-right"></span>
    <div class="ico-scan"></div>
    <div class="tip-text">

    </div>
</div>
<div class="tip-text">
</div>
</div>
<div class="foot">
    <div class="inner">

    </div>
</div>
</div>
<script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//lib.baomitu.com/layer/3.1.1/layer.min.js"></script>
<script src="//lib.baomitu.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="//lib.baomitu.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script>
    var intDiff = parseInt(5*60);//倒计时总秒数量

    function timer(intDiff){
        window.setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute == '00' && second == '00') document.getElementById('qrcode').innerHTML='<br/><br/><br/><br/><br/><h2>二维码超时 请重新发起交易</h2><br/><br/><br/>';
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day+"天");
            $('#hour_show').html('<s id="h"></s>'+hour+'时');
            $('#minute_show').html('<s></s>'+minute+'分');
            $('#second_show').html('<s></s>'+second+'秒');
            intDiff--;
        }, 1000);
    }
    var isMobile = function (){
        var ua = navigator.userAgent;
        var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
            isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
            isAndroid = ua.match(/(Android)\s+([\d.]+)/);
        return isIphone || isAndroid;
    }
    window.onload = function(){
        if(isMobile()){
            $('.mobile-btn').show();
            $('.mobile-tip').show();
        }
    }
</script>
</body>
</html>